<template>
	<view class="current">
		<view class="main1">
			<view class="txt1" style="font-weight: 600;">精选优选<text class="txt">随存随取 低门槛</text></view>
			<view class="txt2">
				<view class="txtx">精品</view>
				<view v-for="(item,index) in currentSift" :key='index' @click="upData(item)" >
					<view class="txtx1">
						<view class="left">
							<view class="red">{{item.currentProductChgLastWeek}}%</view>
							<view>七日年化率</view>
						</view>
						<view>
							<view class="black">{{item.currentProductName}}</view>
							<view>灵活转出{{item.currentSupplierPropertyBuy}}元起购</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="main2">
			<view class="title" style="font-weight: 600;">全部产品</view>
			<view class="main">
				<view v-for="(item,index) in dominatorProduct" :key='index' @click="upData(item)">
					<view class="txt1">
						<view class="left">
							<view class="red" style="margin-bottom: 10rpx;">{{item.currentProductChgLastWeek}}%</view>
							<view>7日年化收益率</view>
						</view>
						<view>
							<view class="black" style="margin-bottom: 10rpx; font-weight: 600;">
								{{item.currentProductName}}</view>
							<view>货币基金{{item.currentSupplierPropertyBuy}}元起购</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapState,
		mapMutations,
		mapActions
	} = createNamespacedHelpers('licai');
	export default {
		created() {
			this.getcurrentSifts()
			this.gethighProducts()
			this.getdominatorProducts()
		},
		data() {
			return {};
		},
		methods: {
			...mapActions(['getcurrentSifts', 'gethighProducts', 'getdominatorProducts']),
			upData(data) {

				console.log(data)
				
				uni.navigateTo({
					url: '/pages/nanfang/nanfang?id=' + data.currentProductId+'&name='+data.currentProductName
				})
				
				
				// // #ifdef APP-PLUS
				// uni.switchTab({
				// 	url: '/pages/nanfang/nanfang?id=' + data.currentProductId+'&name='+data.currentProductName
				// })
				//  // #endif
			}

		},
		computed: {
			...mapState(['currentSift', 'highProduct', 'dominatorProduct'])
		}
	};
</script>

<style lang="scss">
	.current {
		padding: 0 24rpx;
		background-color: #fafafa;

		.main1 {
			padding: 40rpx 0;

			.txt1 {
				color: #333333;
				font-size: 36rpx;

				.txt {
					padding-left: 24rpx;
					font-size: 22rpx;
					color: #cdcdcd;
				}
			}

			.txt2 {
				background-color: rgb(255, 255, 255);
				margin-top: 30rpx;
				position: relative;
				padding-left: 28rpx;
				padding-bottom: 20rpx;
				border-radius: 18rpx;

				box-shadow: 0px 0px 10px 0rpx #cdcdcd;

				.txtx1 {
					display: flex;
					color: #cdcdcd;
					font-size: 24rpx;
					align-items: flex-end;

					margin-top: 10rpx;

					.left {
						width: 324rpx;

						.red {
							color: #ff4658;
							font-size: 40rpx;
							margin-bottom: 10rpx;
						}
					}

					.black {
						color: #333333;
						font-size: 28rpx;
					}
				}

				.txtx {
					position: relative;
					background-color: rgb(28, 7, 219);
					width: 108rpx;
					height: 44rpx;
					color: #ffffff;
					font-size: 24rpx;
					text-align: center;
					line-height: 44rpx;
					margin-left: 566rpx;
					border-radius: 0 18rpx 0 18rpx;
				}
			}
		}

		.main2 {
			.title {
				font-size: 36rpx;
				color: #333333;
			}

			.main {
				background-color: #ffffff;
				border-radius: 20rpx;
				margin-top: 20rpx;
				box-shadow: 0px 0px 10px 0rpx #cdcdcd;
				padding: 0px 15rpx;

				>view {
					padding: 10rpx 24rpx;
					border-bottom: 1px solid #cdcdcd;
				}

				.txt1 {
					display: flex;
					color: #cdcdcd;
					font-size: 24rpx;
					align-items: flex-end;

					.left {
						width: 324rpx;

						.red {
							color: #ff4658;
							font-size: 40rpx;
						}
					}

					.black {
						color: #333333;
						font-size: 28rpx;
					}
				}

				.line {
					border-top: 2rpx solid red;
					margin: 30rpx 0;
				}
			}
		}
	}
</style>
